<template>
  <div>
    <van-nav-bar title="云头条-登录" />
    <div>
      <!--vant-form整体表单组件
        @submit -> 自定义事件（提交事件）-->
      <van-form @submit="onSubmit">
        <!--van-field 输入框
          rules 表单校验规则-->
        <van-field
          v-model="user.mobile"
          name="mobile"
          required
          label="手机号"
          placeholder="请输入11为手机号"
          :rules="[{ required: true, message: '请填写正确的手机号', pattern: /^1[3-9]\d{9}$/ }]"
        />
        <van-field
          v-model="user.code"
          type="password"
          name="code"
          required
          label="密码"
          placeholder="请输入6位的密码"
          :rules="[{ required: true, message: '请填写正确的密码'}]"
        />
        <div style="margin: 16px;">
          <!--round是否为圆形，默认值true
            block 代表块级元素
            native-type 代表原生button的type属性，说明van-button是submit提交整个表单功能的按钮-->
          <van-button round block type="info"
                      native-type="submit"
                      :disabled="loading"
                      :loading="loading" loading-text="登录中...">登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
// 写需求套路
// 1.html+css
// 2.数据铺设，数据绑定，数据微调
// 3.js交互->事件/正则

// 组件使用套路
// 1.找组件，引组件，用组件（标签和js复制），读，删，改

// 目标1：实现顶部导航->自定义样式
// 目标2：实现表单组件->读，改，加
// 目标3：收集值以后，调用接口 -> 查看登录结果

// 按需导入相关模块
import { loginAPI } from '@/api'
import { Notify } from 'vant'
import { setToken } from '@/utils/token'

export default {
  name: 'index',
  data () {
    return {
      user: {
        mobile: '13579246810', // 手机号
        code: '246810' // 验证码（没有接口，此处用密码：246810）
      },
      loading: false
    }
  },
  methods: {
    // 提交方法（from表单整体通过验证才会触发）
    async onSubmit (values) {
      // 可以直接用values(收集参数名和值)
      console.log('submit', values)
      // console.log(this.user)
      // 启用加载状态
      this.loading = true
      try {
        const { data: { data: res } } = await loginAPI(this.user)
        console.log(res)
        Notify({ type: 'success', message: '登录成功' })
        // 存储token
        setToken(res.token)
        // 编程式导航跳转 登录不用回退 所以使用replace跳转更好 push也可
        await this.$router.replace({
          path: '/layout'
        })
      } catch (e) {
        // Promise内ajax抛出错误，直接进入这里
        Notify({ type: 'danger', message: '账号或密码错误' })
      }
      // 网络请求完成 无论成功/报错 关闭加载状态
      this.loading = false
    }
  }
}
</script>

<style scoped lang="less">
//.van-nav-bar {
//  background-color: #0076ff;
//}
///deep/ .van-nav-bar__title {
//  color: #fff
//}
</style>
